<template>
  <Container>
    <div class="icon-list">
      <div class="icon-item">
        <IconAdd />
        <span>IconAdd</span>
      </div>
      <div class="icon-item">
        <IconAddress />
        <span>IconAddress</span>
      </div>
      <div class="icon-item">
        <IconAirport />
        <span>IconAirport</span>
      </div>
      <div class="icon-item">
        <IconArrowDown />
        <span>IconArrowDown</span>
      </div>
      <div class="icon-item">
        <IconArrowRight />
        <span>IconArrowRight</span>
      </div>
      <div class="icon-item">
        <IconCalendar />
        <span>IconCalendar</span>
      </div>
      <div class="icon-item">
        <IconCheck />
        <span>IconCheck</span>
      </div>
      <div class="icon-item">
        <IconCircleCheck />
        <span>IconCircleCheck</span>
      </div>
      <div class="icon-item">
        <IconCircleClose />
        <span>IconCircleClose</span>
      </div>
      <div class="icon-item">
        <IconCirclePlus />
        <span>IconCirclePlus</span>
      </div>
      <div class="icon-item">
        <IconCircleY />
        <span>IconCircleY</span>
      </div>
      <div class="icon-item">
        <IconClose />
        <span>IconClose</span>
      </div>
      <div class="icon-item">
        <IconComment />
        <span>IconComment</span>
      </div>
      <div class="icon-item">
        <IconConsult />
        <span>IconConsult</span>
      </div>
      <div class="icon-item">
        <IconDownload />
        <span>IconDownload</span>
      </div>
      <div class="icon-item">
        <IconEmail />
        <span>IconEmail</span>
      </div>
      <div class="icon-item">
        <IconLanguage />
        <span>IconLanguage</span>
      </div>
      <div class="icon-item">
        <IconLocation />
        <span>IconLocation</span>
      </div>
      <div class="icon-item">
        <IconMenu />
        <span>IconMenu</span>
      </div>
      <div class="icon-item">
        <IconMinus />
        <span>IconMinus</span>
      </div>
      <div class="icon-item">
        <IconMobile />
        <span>IconMobile</span>
      </div>
      <div class="icon-item">
        <IconMore />
        <span>IconMore</span>
      </div>
      <div class="icon-item">
        <IconPhone />
        <span>IconPhone</span>
      </div>
      <div class="icon-item">
        <IconPlus />
        <span>IconPlus</span>
      </div>
      <div class="icon-item">
        <IconPointTip />
        <span>IconPointTip</span>
      </div>
      <div class="icon-item">
        <IconReceive />
        <span>IconReceive</span>
      </div>
      <div class="icon-item">
        <IconRollBack />
        <span>IconRollBack</span>
      </div>
      <div class="icon-item">
        <IconSearch />
        <span>IconSearch</span>
      </div>
      <div class="icon-item">
        <IconUser />
        <span>IconUser</span>
      </div>
      <div class="icon-item">
        <IconUserGroup />
        <span>IconUserGroup</span>
      </div>
      <div class="icon-item">
        <IconDetail />
        <span>IconDetail</span>
      </div>
      <div class="icon-item">
        <IconViewmore />
        <span>IconViewmore</span>
      </div>
      <div class="icon-item">
        <IconFollowUp />
        <span>IconFollowUp</span>
      </div>
    </div>
  </Container>
</template>
<script setup lang="ts">
import { h, ref } from "vue";

const iconsList = import.meta.glob("../components/Icon/**/*.*", {
  eager: true,
});

let iconList = ref<any[]>([]);
Object.keys(iconsList).map((key) => {
  let nameSplit = key.split("/Icon/")[1];
  let iconName;
  if (nameSplit.includes("/")) {
    iconName =
      nameSplit.split("/")[0] + nameSplit.split("/")[1].split(".vue")[0];
  } else {
    iconName = nameSplit.split(".vue")[0];
  }
  iconName = "Icon" + iconName;
  iconList.value.push({
    iconName,
    compnent: h(`<${iconName}/>`),
  });
});
</script>

<style scoped lang="less">
.icon-list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  gap: 20px;
  :deep(.icon-item) {
    border: 1px solid #dfdfdf;
    cursor: pointer;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 16px;
    color: #666;
    align-items: center;
    & > *:first-child {
      width: 32px;
      height: 32px;
    }
  }
}
</style>
